<template>
  <div>
    <div style="display: flex;flex-direction: row;justify-content: space-between;">
      <el-form :inline="true" :model="searchForm" ref="formRef" style="display: flex;flex-direction: row;">
        <el-form-item label="用户手机号" prop="wxUserId">
          <el-input v-model="searchForm.phoneNumber" placeholder="请输入用户手机号" @keyup.enter="getTableData" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="onReset(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <ExportButton :path="WECHAT_USER_EXPORT_PATH" :fileName="WECHAT_USER_EXPORT_FILE_NAME" />
    </div>
    <el-table :data="state.tableData" border style="width: 100%">
      <el-table-column prop="wxUserId" label="用户id" />
      <el-table-column prop="userName" label="用户名称" />
      <el-table-column prop="phoneNumber" label="手机号" sortable />
      <el-table-column prop="currentPoints" label="积分" sortable />
      <el-table-column label="操作" width="320" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="getPointsList(scope.row.wxUserId)"
            >积分流水</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="state.total"
      :limit="state.pageSize"
      :page-change="PageChange"
    />
    <el-drawer
      v-model="pointState.show"
      title="积分流水"
      direction="rtl"
      size="40%"
    >
      <div style="margin: 30px">
        <el-table :data="pointState.pointsList" border style="width: 100%">
          <el-table-column prop="transactionType" label="交易类型">
            <template #default="scope">
              {{ PointsTransactionTypeInfo[scope.row.transactionType as PointsTransactionTypeEnum] }}
            </template>
          </el-table-column>
          <el-table-column prop="recordDate" label="交易时间" />
          <el-table-column prop="transactionPoint" label="积分">
            <template #default="scope">
              {{ scope.row.flowType == PointsFlowTypeEnum.INFLOW ? "+" : "-"}}{{ scope.row.transactionPoint }}
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="pointState.total"
          :limit="pointState.pageSize"
          :page-change="pointPageChange"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { postWechatList, findPointsFlowList } from "@/api/base";
import { PointsFlowTypeEnum, PointsTransactionTypeEnum, PointsTransactionTypeInfo } from "../enum";
import ExportButton from '@/components/ExportButton/index.vue'
import { WECHAT_USER_EXPORT_PATH, WECHAT_USER_EXPORT_FILE_NAME } from '@/components/ExportButton/config'
import { FormInstance } from "element-plus";

const formRef = ref<FormInstance>();
const searchForm = reactive({
  phoneNumber: "",
});

const state = reactive({
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
});

const pointState = reactive<any>({
  show: false,
  wxUserId: null,
  pointsList: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
});

const getTableData = () => {
  postWechatList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
    extraParamMap: {
      phoneNumber: searchForm.phoneNumber,
    }
  }).then((res) => {
    state.tableData = res.data.rows || [];
    state.total = res.data.total || 0;
  });
};
getTableData();

// 重置按钮
const onReset = (formEl: FormInstance | undefined) => {
  searchForm.phoneNumber = ""
  getTableData();
  if (!formEl) return;
  formEl.resetFields();
};

const getPointsList = async (wxUserId: number) => {
  pointState.show = true;
  pointState.wxUserId = wxUserId;
  try {
    const { data }: any = await findPointsFlowList({
      pageNum: pointState.pageNum,
      pageSize: pointState.pageSize,
      extraParamMap: {
        wxUserId: pointState.wxUserId,
      },
    });
    pointState.total = data.total || 0
    pointState.pointsList = data.rows || []
  } catch {}
};

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  getTableData();
};
const pointPageChange = (page: number) => {
  pointState.pageNum = page;
  getPointsList(pointState.wxUserId);
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
  margin-bottom: 18px !important;
}
</style>
